<template>
    <div>
    <h1>测评未完成学生名单</h1>
    <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传名单</el-button>
    <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
    </el-upload>
    <el-table
      :data="tableData"
      height="500"
      border=true
      style="width: 100%">
      <el-table-column
        prop="studentId"
        label="学号"
        width="320"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="situation"
        label="未完成项目"
        align="center" >
            <el-tag type="info" v-for="student in tableData" v-if="student.mark.mark1<0">个人学年总结</el-tag>
            <el-tag type="info" v-if="0">志愿服务</el-tag>
            <el-tag type="info" v-if="0">学生成绩</el-tag>
            <el-tag type="info" v-if="0">科研情况</el-tag>
            <el-tag type="info" v-if="0">学生服务</el-tag>
            <el-tag type="info" v-if="0">社会实践</el-tag>
      </el-table-column>
    </el-table>
    </div>
</template>
<script>
export default {
  data() {
    return {
    tableData: [{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:-1,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:1,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:-2,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },{
        studentId: '2200077777',
        name: '克烈儿辣舞',
        mark:{
            mark1:7,
            mark2:7,
            mark3:7,
            mark4:7,
            mark5:7,
            mark6:7,
            totalmark:77
        }
    },],
    }
  }
}
</script>